<template>
	<view class="page__content">


		<!-- <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollConfig.scrollHeight + 'px'}" scroll-y
				enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<home-board :config="scrollConfig" ref="home-board"></home-board>
			</scroll-view>
		</view> -->

		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none',height: scrollConfig.scrollHeight + 'px'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollConfig.scrollHeight + 'px'}" scroll-y
				enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Menu :config="scrollConfig" ref="menu"></Menu>
			</scroll-view>
		</view>

		<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollConfig.scrollHeight + 'px'}" scroll-y
				enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Todo :config="scrollConfig" :isPage="false" ref="todo"></Todo>
			</scroll-view>
		</view> -->


		<view id="tabbarBox" :class="{ 'visible': isVisible }">
			<up-tabbar class="tabbar" :safeAreaInsetBottom="safeAreaInsetBottom" :value="currentIndex"
				style="z-index: 9999999 !important;" :fixed="false" activeColor="#51d0d0" :midButton="true"
				inactiveColor="#707070" @change="switchTabbar">
				<up-tabbar-item v-for="(item,index) in tabbarList" :text="item.title" :name="item.id" :key="index"
					:badge="item.badge" :icon="currentIndex==item.id ? item.activeIcon : item.inactiveIcon">
				</up-tabbar-item>
			</up-tabbar>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, computed, reactive, nextTick, getCurrentInstance, defineAsyncComponent } from 'vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onError } = useRequestQueue();

	import { useMainStore, useInventoryStore, useUserStore } from '@/store';
	const inventoryStore = useInventoryStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	import Menu from '@/commonPage/Module/menu';
	// import Todo from '@/commonPage/Module/todo';
	import homeBoard from '@/commonPage/Module/home-board';



	let tabberPageLoadFlag = ref<any>([]);
	let tabbarList = ref<any>([
		// {
		// 	title: '首页',
		// 	activeIcon: 'grid-fill',
		// 	inactiveIcon: 'grid',
		// 	id: 0
		// },
		{
			title: '应用',
			activeIcon: 'grid-fill',
			inactiveIcon: 'grid',
			id: 0
		}]);
	let options = reactive<any>({});
	let currentIndex = ref(0);
	let safeAreaInsetBottom = ref(true);

	// #ifdef MP-WEIXIN
	safeAreaInsetBottom.value = false;
	// #endif

	// let scrollHeight = ref(0);
	let scrollConfig = reactive<any>({
		scrollHeight: 500,
		tabbarHeight: 50
	});
	// 切换导航
	function switchTabbar(index : number) {
		if (index == 2) {

			uni.navigateTo({
				url: "/st_pages/mine/mine",
			});
		} else {
			_switchTabbarPage(index)
		}
	}
	// 切换导航页面
	function _switchTabbarPage(index : any) {
		const selectPageFlag = tabberPageLoadFlag.value[index];
		if (index == 0) {
			// 简单处理，当选中项为0时，将第二项的状态改为false
			tabberPageLoadFlag.value[1] = false;
		}

		if (selectPageFlag === undefined) {
			return
		}
		if (selectPageFlag === false) {
			tabberPageLoadFlag.value[index] = true
		}
		currentIndex.value = index
	}

	function tabbarPageScrollLower() {

	}
	let safeBottom = ref<number>(0);
	// 获取安全底部高度
	function getSafeBottom() {
		let safeareaBottom = uni.getStorageSync('safeareaBottom');
		if (safeareaBottom) {
			safeBottom.value = safeareaBottom;
		} else {
			uni.getSystemInfo({
				success: function (res : any) {
					if (res.safeAreaInsets.bottom) {
						safeBottom.value = res.safeAreaInsets.bottom;
						uni.setStorageSync('safeareaBottom', safeBottom.value)
					}
				}
			})
		}
	}

	const instance = getCurrentInstance() as any;
	function getScollHeightFun() {

		// 总盒子高度
		const windowHeight = uni.$utils.getWindowInfo().windowHeight;

		// 当开启底栏是打开
		// 底部栏高度
		if (tabbarList.value.length > 1) {

			const query = uni.createSelectorQuery().in(instance.proxy);


			query.select('#tabbarBox').boundingClientRect((data : any) => {

				let sysinfo = mainStore.systemConfig.sysDeviceInfo

				if (data) {
					let _tabbarHeight = data.height;

					_tabbarHeight += (sysinfo.safeAreaInsets.bottom / 2);


					let _scrollHeight = windowHeight - _tabbarHeight;
					scrollConfig.tabbarHeight = _tabbarHeight;
					scrollConfig.scrollHeight = _scrollHeight;
				} else {
					scrollConfig.tabbarHeight = 0;
					scrollConfig.scrollHeight = windowHeight;
				}
				isVisible.value = true;
			}).exec();

		} else {
			scrollConfig.tabbarHeight = 0;
			scrollConfig.scrollHeight = windowHeight;
			isVisible.value = true;
		};

	}


	onLoad((option) => {

		Object.assign(options, option);
		let systemInfo = uni.getSystemInfoSync();
		// scrollHeight.value = systemInfo.screenHeight;
		scrollConfig.scrollHeight = systemInfo.screenHeight;
		// 根据options.moduleID 是否为 1，判断是否是进销存
		// if (options.moduleID == 1) { // 进销存展示待办
		// 	tabbarList.value.push({
		// 		title: '审批待办',
		// 		activeIcon: 'clock-fill',
		// 		inactiveIcon: 'clock',
		// 		id: 1
		// 	})
		// };

		tabbarList.value.push({
			title: '个人中心',
			activeIcon: 'account-fill',
			inactiveIcon: 'account',
			id: 2
		})


		inventoryStore.CurrModuleID = options.moduleID;
	});


	// 控制显示状态的变量
	const isVisible = ref(false);

	onMounted(() => {
		nextTick(() => {
			const index = Number(options.index || 0);
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			tabberPageLoadFlag.value = tabbarList.value.map((item : any, tabbar_index : any) => {
				return index === item.id
			});
			switchTabbar(index)
			let routes = getCurrentPages(); //当前页面栈
			mainStore.appConfigInfo.routePageCurrent = routes.length;
			getSafeBottom();
			setTimeout(() => {

				getScollHeightFun();
			}, 0)
		})
	})
</script>

<style lang="scss">
	:deep(.u-tabbar__content) {
		height: auto !important;
		// height: 100rpx !important;
	}

	#tabbarBox {
		/* 初始状态：隐藏 */
		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);
		/* 可以添加一点位移增强效果 */
		/* 添加过渡动画，使显示更平滑 */
		transition: all 0.5s ease-out;
	}

	#tabbarBox.visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
</style>